<template>
  <view-box ref="viewBox" body-padding-bottom="55px">
    <div>
       <group title="未读信息" class="personal-list clear-margin" v-if="data && data.length > 0">
        <cell :link="'/chat/' + item.from.id" v-for="item in data" :key="item.id">
          <img slot="icon" :src="item.from.avatar" class="avatar">
          <p slot="title">{{item.from.name}} <badge :text="item.count" v-if="item.count > 0"></badge></p>
        </cell>
      </group>
      <empty tips="暂无未读消息" v-if="data && data.length === 0"></empty>
    </div>
  </view-box>
</template>
<script>
  import { ViewBox, Cell, Group, Badge } from 'vux'
  export default {
    data () {
      return {
        data: null
      }
    },
    components: {
      ViewBox,
      Cell,
      Group,
      Badge
    },
    mounted () {
      this._getData()
    },
    methods: {
      _getData () {
        this.$vux.loading.show()
        this.$http.get('/chats/unread').then((response) => {
          this.$vux.loading.hide()
          this.data = response.data
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .avatar {
    width: 30px;
    border-radius: 30px;
    margin-right: 10px;
  }
</style>